<!--弹出对话框通过table选择数据-->
<template>
  <el-dialog :visible.sync="open" width="1000px">
    <div style="overflow: scroll">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" v-show="showSearch" s>
        <slot name="queryItems" :queryParams="queryParams"></slot>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="table" v-loading="loading" :data="dataList" highlight-current-row
                @selection-change="handleSelectionChange" @row-click="handleRowClick" :row-key="getRowKey">
        <el-table-column type="selection" width="50" :reserve-selection="true" align="center" fixed/>
        <el-table-column label="序号" type="index" align="center" width="50"/>
        <slot name="tableColumns"></slot>
      </el-table>
      <pagination
        v-show="showPage&&total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleConfirm">确定</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    name: "BaseDialogTableSelect",
    inheritAttrs: false,
    props: {
      multiple: {//是否多选
        type: Boolean,
        default: false,
      },
      required: {//是否必选
        type: Boolean,
        default: true,
      },
      showSearch: {//是否显示查询
        type: Boolean,
        default: true,
      },
      showPage: {//是否显示分页
        type: Boolean,
        default: true,
      }
    },
    data() {
      return {
        open: false,
        loading: false,//表格显示加载中
        total: 0,//表格记录总数
        dataList: [],// 表格数据
        queryParams: {//查询参数
          pageNum: 1,
          pageSize: 10
        },
        selectList: [],
        showOption: {}
      }
    },
    methods: {
      show(option) {//显示组件
        this.showOption = option
        this.open = true
        if (this.$refs.table) {//表格存在就清空选择
          this.$refs.table.clearSelection();
        }
        this.getList()
      },
      handleConfirm() {//确定
        if (this.required && this.selectList.length == 0) {
          this.$modal.confirm('至少选择一条数据')
          return
        }
        if (this.multiple) {//多选
          this.$emit("selection-change", this.selectList)
        } else {//单选
          this.$emit("selection-change", this.selectList.length > 0 ? this.selectList[0] : null)
        }
        this.open = false
      },
      handleClose() {//关闭
        this.open = false
      },
      handleQuery() {//搜索按钮操作
        this.queryParams.pageNum = 1
        this.getList()
      },
      handleRowClick(row, column, event) {//单击某一行选中
        this.$refs.table.toggleRowSelection(row)
      },
      handleSelectionChange(selection) {
        if (!this.multiple) {//单选
          if (selection.length > 1) {
            this.$refs.table.clearSelection();
            this.$refs.table.toggleRowSelection(selection.pop())
          }
        }
        this.selectList = selection;
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm")
        this.handleQuery()
      },
      getList() {//数据查询
        this.loading = true
        this.$parent.getList(this.queryParams, this.showOption)
          .then(res => {
            this.dataList = res.rows
            this.total = res.total
            this.loading = false
          })
          .catch(err => {
            this.loading = false
          })
      },
      getRowKey(item) {
        let key = this.$parent.getRowKey(item)
        return key
      }
    }
  }

</script>

<style scoped>

</style>
